<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 590px;
            height: 470px;
            margin: 0px auto;
            position: relative;
        }


        .slide {
            width: 590px;
            height: 470px;
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 0;
        }

        .slide span {
            position: absolute;
            left: 0;
            font-size: 30px;
            color: #fff;
        }

        .slide img {
            width: 590px;
            height: 470px;
        }

        .slide.active {
            z-index: 999;
        }

        .button-next,
        .button-prev {
            position: absolute;
            top: 50%;
            width: 25px;
            height: 35px;
            line-height: 35px;
            background-color: #d9d9d9;
            background-color: rgba(0, 0, 0, .15);
            margin-top: -20px;
            font-size: 20px;
            z-index: 999;
            transition: background-color .2s ease;
            border-radius: 0 20px 20px 0;
        }

        .button-next i,
        .button-prev i {
            position: relative;
            width: 100%;
            height: 100%;
            color: #fff;
            color: rgba(255, 255, 255, .8);
            transition: color .2s ease;
            font-weight: bold;
        }

        .button-next {
            border-radius: 20px 0 0 20px;
            right: 0;
            text-align: right;
        }

        .pagination {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            z-index: 999;
        }

        .pagination span {
            display: block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #d9d9d9;
            margin: 0 5px;
        }

        .pagination span.active {
            background-color: #fff;
        }

        .slide.active {
            z-index: 3;
        }

        .slide.prev {
            z-index: 2;
        }
    </style>
</head>

<body>
    <div class="container">

        <div class="wrapper">

            <div class="slide active"><span>0</span><img src="./01.jpeg" alt=""></div>
            <div class="slide prev"><span>1</span><img src="./02.jpeg" alt=""></div>
            <div class="slide"><span>2</span><img src="./03.jpeg" alt=""></div>
            <div class="slide"><span>3</span><img src="./04.jpeg" alt=""></div>


            <div class="button-next">
                <i class="iconfont icon-xiangyoujiantou"></i>
            </div>

            <div class="button-prev">
                <i class="iconfont icon-xiangzuojiantou"></i>
            </div>

            <div class="pagination">

                <span class="active"></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>


        <script>
            let prev_index = 0;

            // 当前显示图片的下标; 
            let index = 0;

            // - 左右按钮控制体系
            // 注意 : 我们左右下标控制应该有极限值(最大值或者最小值);
            // 轮播 : 到了最大值还要自增,那么我们要让下标归零! 如果到了最小值还要自减,那么我们要让下标变成最大值! 
            // 我们通过 slide 图片数量来控制index的最大值和最小值! 
            let button_next = document.querySelector(".button-next");
            let button_prev = document.querySelector(".button-prev");
            // 选中所有的slides元素;
            let slides = document.querySelectorAll(".slide");
            // 切换到下一张功能!
            function next() {
                // 我们在index值发生更改之前先去记录一下之前的数据; 
                prev_index = index;
                // 如果 index 值已经是最大值了还要自增，那么我们就给其归零; 
                if (index === slides.length - 1) {
                    index = 0;
                } else {
                    index++;
                }
                // 下标改变之后, 实现动画效果;
                // console.log( index);
                changeSlide();
            }
            // 切换到上一张功能!
            function prev() {
                // 我们在index值发生更改之前先去记录一下之前的数据; 
                prev_index = index;
                // 如果 index值已经是最小值了还要自减,那么我们就让index为下标最大值; 
                if (index === 0) {
                    index = slides.length - 1;
                } else {
                    index--;
                }
                // 下标改变之后, 实现动画效果;
                // console.log( index );
                changeSlide();
            }
            button_next.addEventListener("click", next)
            button_prev.addEventListener("click", prev)

            // 给按钮添加事件, 让按钮给index赋值; 
            // 注意 : 这个原理就是把按钮的下标赋值给index;
            let spans = document.querySelectorAll(".pagination span");
            // 给所有的span添加事件 : 
            // 我们找到按钮下标的方式非常简单，就是在内部创建一个 indexOf 函数, 查找按钮在元素组spans里面的下标; 
            function change() {
                // 注意 : 我们要对下标直接赋值部分进行优化, 如果我们在赋值前, index已经和要复制的内容相等了就不再赋值了! 
                // 1. 获取当前元素在 spans 数组之中的下标; 
                let i = indexOf(spans, this);
                // 如果要赋值的下标和当前显示的图片下标一致, 我们就直接跳出程序; 
                if (i === index) {
                    return false;
                }
                // 我们在index值发生更改之前先去记录一下之前的数据; 
                prev_index = index;
                // 给index赋值当前的数据; 
                index = i;
                // console.log( index );
                changeSlide();
            }

            // indexOf 工具用来查找数组之中的data属性所在位置! 
            function indexOf(arr, data) {
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i] === data) {
                        return i;
                    }
                }
                return -1;
            }

            for (let i = 0; i < spans.length; i++) {
                spans[i].addEventListener("mouseover", change)
            }

            // 只要下标改变了我们都去调用changeSlide功能! 
            function changeSlide() {
                // console.log( index , prev_index , "实现动画效果");
                // - 添加类名之前我们应该先清空所有元素的类名! 
                clearClass();
                // 添加类名 : 
                // 给应该显示的元素添加active类名
                slides[index].classList.add("active")
                // 给背景元素添加prev类名; 
                slides[prev_index].classList.add("prev");
                // 给按钮元素添加active类名; 
                spans[index].classList.add("active");
                // 实现动画效果; 
                // - 让index 下标的元素显示出来(下标从 0 - 1 )
                //   - 设置起始点 opacity : 0 
               
            }

            function clearClass() {
                for (let i = 0; i < slides.length; i++) {
                    // 清空全部slide结构的类名
                    slides[i].classList.remove("active");
                    slides[i].classList.remove("prev");
                    // 清除掉按钮部分的active类名; 
                    spans[i].classList.remove("active");
                }
            }









        </script>


</body>

</html>